﻿<div class="container">
    <fieldset class="search-posts">
        <legend class="search-posts-heading">Search Posts</legend>
        <div class="alert alert-warning alert-box" style="display: none;">
            <strong>Warning!</strong> <span class="alert-content"></span>
        </div>
        <div class="input-group">
            <input data-bind="value: keyword" type="text" class="form-control" placeholder="Keyword" />
            <span class="input-group-btn">
                <button class="btn btn-warning btn-submit" type="button" data-bind="click: clear">Clear</button>
                <button class="btn btn-primary btn-submit" type="button" data-bind="click: search">Search</button>
            </span>
        </div>
    </fieldset>
    <div class="page-header">
        <h3>
            <span>Results</span><small>(<span data-bind="text: posts.length"></span>)</small>
        </h3>
    </div>
    <table class="table table-hover" data-bind="visible: posts.length">
        <thead>
            <tr>
                <th>Title</th>
                <th>By</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody data-template="post-template" data-bind="source: posts"></tbody>
    </table>
    <script type="text/x-kendo-template" id="post-template">
        <tr>
            <td>
                <a data-bind="text: title" href="#= '\#/posts/' + id #"></a>
            </td>
            <td data-bind="text: postedBy"></td>
            <td data-bind="text: postDate"></td>
            <td>
                <a href="#= '\#/posts/' + id #">
                    <span class="glyphicon glyphicon-zoom-in"></span>
                </a>
                <a href="#= '\#/posts/' + id + '/comment' #">
                    <span class="glyphicon glyphicon-comment"></span>
                </a>
            </td>
        </tr>
    </script>
</div>